<div id="sidebar">
  <div
    class="sidebar-item"
    hx-target="#sidebar-content"
    hx-get="../web/components/user/navigate"
    data-section="navigate"
  >
    Navigate
  </div>
  <div
    class="sidebar-item"
    hx-target="#sidebar-content"
    hx-get="../web/components/user/change-password"
    data-section="change-password"
  >
    Change Password
  </div>
  <div
    class="sidebar-item"
    hx-target="#sidebar-content"
    hx-get="../web/components/user/invite"
    data-section="invite"
  >
    Invite
  </div>
  <div
    class="sidebar-item"
    hx-target="#sidebar-content"
    hx-get="../web/components/user/user-usage"
    data-section="user-usage"
  >
    User Usage
  </div>
  <div
    class="sidebar-item"
    hx-target="#sidebar-content"
    hx-get="../web/components/user/workspace-usage"
    data-section="workspace-usage"
  >
    Workspace Usage
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", (event) => {
    const frag = window.location.href.split("#");
    if (frag.length > 1) {
      const section = frag[1];
      const sidebarItems = document.querySelectorAll(".sidebar-item");

      sidebarItems.forEach((item) => {
        if (item.getAttribute("data-section") === section) {
          item.click();
        }
      });
    }
  });
</script>
